<template>
  <div class="curr-page">
    <div v-if="car_list.length == 0">
      <el-empty description="暂无车辆"></el-empty>
    </div>
    <div v-else v-for="(item, index) in car_list" :key="index">
      <el-descriptions
        class="mt-3"
        :title="item.name"
        :column="5"
        size="medium"
      >
        <template #extra>
          <span class="el-icon-edit mr-3">编辑</span>
          <span class="el-icon-delete">删除</span>
        </template>
        <el-descriptions-item span="1">
          <el-image
            :src="item.icon"
            style="height:100px;width:100px"
            fit="contain"
          >
            <template #placeholder>
              <div class="image-slot">加载中<span class="dot">...</span></div>
            </template>
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item span="4"> </el-descriptions-item>
        <el-descriptions-item label="车主" span="1">
          {{ item.user[0].username }}
        </el-descriptions-item>
        <el-descriptions-item label="归属店铺" span="4">
          {{ item.shop[0].name }}
        </el-descriptions-item>
        <el-descriptions-item label="品牌">
          {{ item.brand[0].name }}
        </el-descriptions-item>
        <el-descriptions-item label="车型">
          {{ item.carModel[0].name }}
        </el-descriptions-item>
        <el-descriptions-item label="车龄">
          {{ item.age }}年
        </el-descriptions-item>
        <el-descriptions-item label="里程数">
          {{ item.milage }}公里
        </el-descriptions-item>
        <el-descriptions-item label="变速器类型">
          {{ item.TransmissionType }}
        </el-descriptions-item>
        <el-descriptions-item label="颜色">
          {{ item.color[0].name }}
        </el-descriptions-item>
        <el-descriptions-item label="燃油类型">
          {{ item.fuelType[0].name }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      car_list: [],
    };
  },

  methods: {
    fetchInitData() {
      this.fetchUserCar();
    },

    async fetchUserCar() {
      await this.$axios
        .get(`/car/user/${sessionStorage.userId}`)
        .then((res) => {
          // this.car_list = {};
          this.car_list = res.data.car_list;
        });
    },
  },

  created() {
    this.fetchInitData();
  },
};
</script>

<style lang="scss" scoped>
.curr-page {
  margin: 0px;
  padding: 0px;
}
</style>
